
    <div class="container-fluid">
        <div class="row body_content">
            <div id="network_manage">
                <div class="panel panel-primary">
                    <div class="panel-heading setnetwork" data-i18n="setnetwork.Network Configure"></div>
                    <div class="panel-body" id="network_manage_content"></div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">

    function append_conf_item (body, name, key, value) {
        var ele = document.createElement ("div"),
            key_ele = document.createElement ("div"),
            value_ele = document.createElement ("div");

        ele.setAttribute ("class", "row form-group col-lg-12");
        key_ele.setAttribute ("class", "col-lg-4");
        key_ele.innerHTML = "<label class=\"pull-right setnetwork\" data-i18n=\"setnetwork." + key + "\"></label>";
        value_ele.setAttribute ("class", "col-lg-7");
        value_ele.innerHTML = "<input type=\"text\" class=\"form-control\" id=\"" + name + "-" + key + "\" value=\"" + value + "\">";
        ele.appendChild (key_ele);
        ele.appendChild (value_ele);
        body.appendChild (ele);
    }

    function setnetwork () {
        $.get("/admin/getnetworkinterfaces", function (data) {
            for (var i = 0; i < data.length; i++) {
                var interface = data[i],
                    interface_title = document.createElement ("h3"),
                    interface_conf = document.createElement ("div");

                interface_title.innerHTML = interface.name;
                interface_conf.setAttribute ("class", "well row network-conf");

                for (key in interface) {
                    if (key === "name" || key === "family" || key === "dns-nameservers")
                        continue;
                    append_conf_item (interface_conf, interface.name, key, interface[key]);
                }

                $('#network_manage_content').append (interface_title);
                $('#network_manage_content').append (interface_conf);
            }

            var save_button = document.createElement ("button");
            save_button.setAttribute ("class", "btn btn-primary pull-right setnetwork");
            save_button.setAttribute ("id", "savenetwork");
            save_button.setAttribute ("data-i18n", "setnetwork.Save Network Configure");
            $('#network_manage_content').append (save_button);

            $('#savenetwork').unbind ('click').click (function () {
                /* update data */
                var dirty = false;
                for (var i = 0; i < data.length; i++) {
                    var interface = data[i];
                    for (key in interface) {
                        if (key === "name" || key === "family" || key === "dns-nameservers")
                            continue;
                        var id = "#" + interface.name + "-" + key;
                        if ($(id).val () === interface[key])
                            continue;
                        dirty = true;
                        data[i][key] = $(id).val ();
                    }
                }
                /* network changed? */
                if (!dirty) {
                    bootbox.alert ($.t ("setnetwork.No Change"));
                    return;
                }

                $.post ("setnetworkinterfaces", JSON.stringify (data, null, 4), function (response) {
                    if (response.result == 'success') {
                        bootbox.alert ($.t ("setnetwork.Set Network Success"));
                    } else {
                        bootbox.alert ($.t ("setnetwork.Set Network Failure") + response.reason);
                    }
                });
            });

            $(".setnetwork").i18n ();
        });
    }

    $ (document).ready (function () {
        $.get("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                bootbox.alert ("get configure failure: " + data.reason);
                return;
            }

            setnetwork ();

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".setnetwork").i18n ();
            });

        });
    });

    </script>
